<template>
    <view class="bg-white px-4 w-350px m-auto mt-4">
        <view class="flex items-center gap-2">
            <text class="text-gray-500 text-lg mr-auto">视频</text>
            <view class="flex items-center gap-2" @click="handleMore">
                <text class="text-gray-500 text-sm">更多</text>
                <!-- <image class="w-20 h-60 rounded-full" mode="aspectFit" :src="pic" /> -->
                <image class="w-30 h-72 rounded-full" mode="aspectFit" :src="right" />
            </view>
        </view>
        <view class="flex w-full justify-center items-center gap-2">
            <view v-for="i in list" :key="i.id" class="w-120 p-2 flex flex-1 items-center flex-col gap-2" @click="handleClick(i.id)">
                <view class="relative w-full h-150">
                    <image class="w-full h-150 rounded-4 bg-[#999]" mode="aspectFill" :src="useImage(i.cover)" />
                    <!-- 播放图标 -->
                    <view class="absolute inset-0 flex items-center justify-center">
                        <!-- <IconFont name="play" size="40" color="#ffffff"></IconFont> -->
                        <IconFont font-class-name="iconfont" size="40" class-prefix="icon" color="#ffffff" name="bofang" />
                    </view>
                </view>
                <text class="text-gray-500 text-sm line-clamp-2 overflow-hidden text-ellipsis">{{i.name}}</text>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import pic from '@/assets/ico/pic.png';
import Taro, { useRouter } from '@tarojs/taro';
import right from '@/assets/svg/right.svg';
import { onMounted, ref } from 'vue';
import { request } from '@/service/request';
import { useImage } from '@/hooks';
import { IconFont } from '@nutui/icons-vue-taro';
const router = useRouter();

const handleClick = (i: number) => {
    Taro.navigateTo({
        url: `/package-other/videos/index?id=${i}`
    });
};

const handleMore = () => {
    Taro.navigateTo({
        url: '/package-home/videos/index'
    });
};

onMounted(()=>{
    getList();
})

const list = ref<any[]>([])

//请求接口/news_shop/newsShop/list
async function getList(){
//   openid
  const {success, error} = await request.get<any>('/vedio_shop/vedioShop/list', {
    pageNo: 1,
  }, {
        useErrMsg: true
  });
  // success video
  if(success){
    list.value = success.records.slice(0, 2)
  }
  // res list
}
</script>